<template>
  <div class="event-invoke panel line-panel">
    <header class="title"></header>
    <main class="no-data" v-if="listData.length == 0">
      暂无数据
    </main>
    <main v-show="listData.length>0">
      <ul ref="listRef" class="list" style="overflow: auto">
        <li v-for="(item, index) in listData" :key="index" class="list-item">
          <div class="state" :class="index > 2 ? '' : 'top'">NO.{{ index + 1 }}</div>
          <div class="date">{{ item.x }}</div>
          <div class="content">{{ item.y }}</div>
        </li>
      </ul>
    </main>
    
  </div>
</template>

<script>
import { ref,watch, onBeforeUnmount } from 'vue'
import { getEvtRank } from '@/api/statistics'
import { parseTime } from '@/utils'

export default {
  name: 'EventInvoke',
  props: {
    time: {
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    },
    refresh: {
      type: Number,
    }
  },
  setup(props) {
    const listData = ref([])
    const getData = async () => {
      const {endDate,startDate} = props.time
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      const res = await getEvtRank(para);
      if (res.status === 200) {
        listData.value = res.data
        if (res.data.length === 0) {
          currentScroll.value = 0
          clearInterval(timer.value)
          timer.value = null
        } else {
          timer.value = setInterval(() => {
            currentScroll.value += 1
            handleScroll()
          }, 3000)
        }
      }
    };
    const timer = ref(null)
    watch(() => props.refresh, () => {
      clearInterval(timer.value)
      timer.value = null
      getData()
    });
    watch(() => props.code, () => {
      clearInterval(timer.value)
      timer.value = null
			getData()
		});
    const listRef = ref(null)
    const currentScroll = ref(0)
    const handleScroll = () => {
      listRef.value.scrollTo(0, 50 * currentScroll.value)
    }


    onBeforeUnmount(() => {
      clearInterval(timer.value)
      timer.value = null
    })
    return {
      listRef,
      listData,
      parseTime
    }
  }
}
</script>

<style lang="scss" scoped>

  @import './style.scss';

</style>